<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <style>
        body {
            background: url("../img/bg.png");
        }

        .center {
            width: 400px;
            margin: auto;
            background: white;
            text-align: center;
        }


    </style>
</head>
<body>
<div><img src="../img/logo.png"></div>
<div class="center">
    <div>注册详情</div>
    <hr>
    <form>
        <div>
            <label for="username">姓名</label>
            <input id="username" name="username" type="text" placeholder="请输入姓名" required>
        </div>
        <div>
            <label for="password">密码</label>
            <input id="password" name="password" type="password" placeholder="请输入密码" required>
        </div>
        <div>
            <label for="email">邮箱</label>
            <input id="email" name="email" type="email" placeholder="请输入邮箱" required>
        </div>
        <div>
            <label for="tel">手机</label>
            <input id="tel" name="tel" type="tel" placeholder="请输入手机" required>
        </div>
        <hr>
        <div>
            <label for="gender">性别</label>&nbsp;&nbsp;&nbsp;
            <input id="gender" name="gender" type="radio" value="男" >男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input  name="gender" type="radio" value="女" >女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div>
            <label for="hobby">爱好</label>&nbsp;&nbsp;&nbsp;
            <input id="hobby" name="hobby" type="checkbox" value="music" >音乐
            <input  name="hobby" type="checkbox" value=",movie" >电影
            <input  name="hobby" type="checkbox" value="game" >游戏
        </div>
        <div>
            <label for="birthday">生日</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="birthday" name="birthday" type="date" >
        </div>
        <div>
            <label for="city">所在城市</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select id="city" name="city">
                <option>---请选择城市---</option>
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>天津</option>
                    <option>上海</option>
                    <option>重庆</option>
                </optgroup>
                <optgroup label="省会">
                    <option>太原</option>
                    <option>太原</option>
                    <option>太原</option>
                    <option>太原</option>
                </optgroup>

            </select>
            <hr>
            <div>
                <label for="desc">个人介绍:</label>
                <textarea id="desc" name="desc" cols="40" rows="5" placeholder="请输入你的个人情况"></textarea>
            </div>
        </div>

        <hr>
        <button type="submit">注册</button> &nbsp;&nbsp;&nbsp;
        <button type="reset">重置</button>
    </form>


</div>


</body>
</html>